<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
     v-else,v-else-if指令：
     1：作用：辅助v-if 进行判断渲染
     2：语法：v-else   v-else-if="表达式"
     3.注意：需要紧挨着v-if一起使用
     -->
    <div id="id">
        <div v-if="gender === 1" class="box">性别：男</div>
        <div v-else class="box">性别：女</div>

        <div v-if="score >= 90" class="box">成绩A，简直太棒了</div>
        <div v-else-if="score >= 75" class="box">成绩B，继续努力</div>
        <div v-else-if="score >= 60" class="box">成绩C，加油呀</div>
        <div v-else class="box">成绩D，糟糕哦</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#id',
            data:{
                gender: 1,
                score:86

            }
        })
    </script>
</body>
</html>